<template>
  <div class="Overview">
    <div class="Overview-item" v-for="item in showList" :key="item.id">
      <div class="item-title">{{ item.name }}</div>
      <div
        class="item-options"
        v-for="citem in item.children"
        :key="citem.id"
        @click="itemClick(citem)"
      >{{ citem.name }}</div>
    </div>
  </div>
</template>

<script>
import { getWorkMenu } from "@/api/portalChief";
export default {
  name: "Overview",
  data () {
    return {
      showList: []
    };
  },
  created () {
    getWorkMenu("运营官门户总览").then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    disposeData (res) {
      if (res.status === 200) {
        this.showList = res.data.data[0].children;
      }
    },
    itemClick (item) {
      this.$router.push({
        path: item.path,
        query: {
          tabs: item.sort
        }
      });
    }
  }
};
</script>

<style lang="less">
.Overview {
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: 0;
  background: url("../../../../../assets/ChiefImg/overview.png") no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;

  &::-webkit-scrollbar {
    display: none;
  }

  > div {
    width: 33%;
    padding: 1% 10%;
    text-align: center;
  }

  .Overview-item {
    > div {
      padding: 1vh 0;
    }
    .item-title {
      .color();
      font-weight: bold;
      font-size: 1.5vw;
      border-bottom: 2px solid #2a4177;
    }
    .item-options {
       cursor: pointer;

       &:hover{
        .color();
      }
    }
  }
}
</style>
